import React, {Component} from 'react'
import './index.less'
import { observer } from 'mobx-react/custom'
import Cover from 'components/common/cover'
import agent from 'lib/utils/agent'
import PropTypes from 'prop-types'

@observer
export default class CoverLoading extends Component {
  render () {
    if (!this.props.loading) return <div />
    let content
    if (agent.isIOS()) {
      content = <img style={{'width': 40, 'height': 40, 'marginBottom': '100%'}}
        src={require('images/loadingGif.gif')} alt='' />
    } else {
      content = <div style={{'marginBottom': '100%', 'background': 'transparent'}}>
        loading......</div>
    }
    return (
      <Cover visible style={{'textAlign': 'center'}}>
        {content}
      </Cover>
    )
  }
}

CoverLoading.defaultProps = {
  loading: false
}

CoverLoading.propTypes = {
  loading: PropTypes.bool
}
